<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DDNS-Go 域名解析列表</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <header>
            <h1>DDNS-Go 域名解析列表</h1>
            <p>当前域名解析状态监控</p>
        </header>

        <main>
            <div class="loading" id="loading">
                <div class="spinner"></div>
                <p>正在加载域名解析列表...</p>
            </div>

            <div class="error" id="error" style="display: none;">
                <div class="error-icon">⚠️</div>
                <p id="error-message">加载失败，请检查服务器状态</p>
                <button onclick="loadDomainList()">重试</button>
            </div>

            <div class="domain-list" id="domain-list" style="display: none;">
                <div class="list-header">
                    <span>域名</span>
                    <span>解析类型</span>
                    <span>解析值</span>
                    <span>状态</span>
                </div>
                <div class="list-items" id="list-items">
                    <!-- 域名列表将通过JavaScript动态生成 -->
                </div>
            </div>

            <div class="stats" id="stats" style="display: none;">
                <div class="stat-item">
                    <span class="stat-label">总域名数:</span>
                    <span class="stat-value" id="total-count">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">IPv4域名:</span>
                    <span class="stat-value" id="ipv4-count">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">IPv6域名:</span>
                    <span class="stat-value" id="ipv6-count">0</span>
                </div>
            </div>
        </main>

        <footer>
            <p>最后更新: <span id="last-update">-</span></p>
            <button onclick="loadDomainList()" class="refresh-btn">刷新</button>
        </footer>
    </div>

    <script src="script.js"></script>
</body>

</html>